<style>
    form {
        padding: 0 10px;
    }

    tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }

    #MaskLayer .date_list td {
        -webkit-transition: color 500ms;
        transition: color 500ms;
        text-align: center;
        position: relative;
    }

    #MaskLayer .date_list td > div {
        vertical-align: middle;
        display: table-cell;
        margin: auto;
        height: 50px;
        width: 50px;
        border-radius: 45px;
        color: #484d57;
        border: 1px #F6769E;
        background-color: #ffffff;
        font-size: 14px;
    }

    #MaskLayer .date_list td.active > div {
        color: #fff;
        background: #F6769E;
        border-color: #F6769E;
    }

    #MaskLayer .date_list td.active > i {
        display: block;
        position: absolute;
        top: 52px;
        left: 5px;
        width: 0;
        height: 0;
        border-left: 35px solid transparent;
        border-right: 35px solid transparent;
        border-bottom: 20px solid #fff;
        font-size: 0;
        line-height: 0;
    }

    #MaskLayer .gird_table td:first-child {
        border-left: none;
    }

    #MaskLayer .gird_table.active td {
        -webkit-transform: rotateY(0deg) scale(1);
        transform: rotateY(0deg) scale(1);
        opacity: 1;
    }

    #MaskLayer .gird_table td:nth-child( 1) {
        transition-delay: 50ms;
        -webkit-transition-delay: 50ms;
    }

    #MaskLayer .gird_table td {
        font-size: 15px;
        width: 25%;
        text-align: center;
        vertical-align: middle;
        padding: 5px;
    }

    #MaskLayer .gird_table td {
        -webkit-transform: rotateY(0deg) scale(.8);
        transform: rotateY(0deg) scale(.8);
        -webkit-transition: -webkit-transform 250ms, opacity 250ms;
        transition: transform 250ms, opacity 250ms;
        opacity: 0;
    }

    #MaskLayer .rel {
        position: relative;
        overflow: hidden;
    }

    * {
        font-family: 'WenQuanYi Micro Hei Mono', 'Microsoft YaHei', sans-serif;
    }

    div {
        display: block;
    }

    #MaskLayer .rel {
        position: relative;
        overflow: hidden;
    }

    .order-tl .rel-tl {
        border-radius: 5px;
        background: #fff;
        padding-bottom: 70px;
    }

    #MaskLayer .gird_table table {
        width: 100%;
        border-bottom: 1px solid #fff;
        table-layout: fixed;
    }

    #MaskLayer .gird_table.active, #MaskLayer .gird_table.deactive, #MaskLayer .gird_table.prepare {
        display: block;
    }

    #MaskLayer .gird_table {
        top: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        display: none;
        z-index: 10;
        margin: 10px 10px;
    }

    #MaskLayer .gird_table td > div {
        width: 120px;
        height: 35px;
        display: table-cell;
        vertical-align: middle;
        border-radius: 5px;
    }

    .dlcontain {
        margin: 20px auto;
    }

    .passed div {
        /*background-color: #cacaca;*/
        /*color: #000000;*/
        background: #fcf7f4;
        color: #ddcdc7;
    }

    .nopassed div {
        background-color: #cacaca;
        color: #000000;
    }

    .time {
        width: 95%;
        margin: 5px auto;
        border-radius: 5px;
        background-color: #ffffff;

    }

    .time span {
        line-height: 50px;
        border: #F6769E 1px solid;
        padding: 5px 5px;
        border-radius: 5px;
    }

    .tech_title {
        height: 30px;
        margin-bottom: 1px;
    }

    .tech_title img {
        position: absolute;
        left: 20px;
    }

    .tech_title span {
        font-size: 16px;
        text-align: left;
        margin-left: 45px;
    }

    .list {
        margin-bottom: 100px;
    }

    .list img {
        border-radius: 50%;
    }

    .selTime {
        background-color: #5EBE60;
    }
</style>

<div class="container">
    <div id="steps" class="boxsd">
        <div class="wrap wrapTop">
            <div class="num_1">1</div>
            <div class="line_1"></div>
            <div class="num_1">时间</div>
            <div class="line_1"></div>
            <div class="num_1">3</div>
        </div>
    </div>
    <form id="frmMain" method="post">
        <div class="form step2 order-tl" id="MaskLayer">
            <div class="dlcontain">
                <table class="date_list" cellspacing="0" style="margin: 5px auto;">
                    <tbody>
                    <tr id="days_tr"></tr>
                    </tbody>
                </table>
            </div>
            <div class="rel rel-tl">
                <div class="gird_table no-available active" data-index="0">
                    <table cellspacing="0" start="1426039200" interval="30">
                        <tbody id="time_body">
                        </tbody>
                    </table>
                </div>
                <div style="color: gray">浅色表示该时间段的店面已约满</div>
            </div>
        </div>
        <div id="submit_button" class="step1" style="position: fixed;bottom: 3px;width: 100%;" ng-click="nextStep()">
            <a class="button primary">下一步</a>
        </div>
    </form>

    <div id="tech_list" hidden="hidden">
        <div class="time">
            <span style="width: 100px">2015/{{order.date}} {{order.time}}</span>
        </div>
        <div class="time tech_title">
            <img src="/imgs/m1.png" height="18" width="18">

            <div>请选择店面</div>
        </div>
        <ul id="Main" class="enginner" style="padding-bottom:40px;margin-top: 50px">
            <li data-ng-repeat="art in artis" class="elevel1" style="height: 100px;" data-ng-click="setTech(art.id,art.head_img,art.name)">
                <div style="width: 100%;height: 100px;">
                    <div style="float: left;width: 40%;height: 100%">
                        <img class="head-photo" src="{{art.head_img}}" height="100%" width="100%">
                    </div>
                    <div style="float: left;width: 60%;height: 100%;">
                        <div style="width: 100%;height: 20%;">
                            <div style="text-align: left;float: left;margin: 5px 3px;font-size: 16px;">
                                {{art.name}}
                            </div>
                            <div style="float: right;margin: 5px 3px;">
                                <img src="imgs/position.png" height="20">
                                {{art.distance | num2mi}}
                            </div>
                        </div>
                        <div style="width: 100%;height: 80%;">
                            <div style="width: 95%;height: 60%;text-align:left;font-size: 14px;color: gray;">
                                <span>地址：北京市昌平区回龙观新龙城底商</span>
                            </div>
                            <div style="width: 95%;height: 30%;text-align: right;margin:10px 5px;font-size: 14px;">
                                {{art.order_num}}单
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

        <!--<ul id="Main" class="enginner" style="padding-bottom:40px;">-->
            <!--<li ng-repeat="art in artis" class="elevel1" style="display: list-item;"-->
                <!--data-ng-click="setTech(art.id,art.head_img,art.name)">-->
                <!--<div class="avatar">-->
                    <!--<div class="head-photo-circle">-->
                        <!--<img class="head-photo" src="{{art.head_img}}" height="73" width="73">-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="content">-->
                    <!--<div class="position">-->
				    <!--<span class="icon">-->
				        <!--<img src="imgs/position.png" height="23">-->
                        <!--{{art.distance | num2mi}}-->
				    <!--</span>-->
                        <!--<span class="distance" data-lat="39.929238" data-lng="116.508479">&nbsp;&nbsp;{{art.distance | num2mi}}</span>-->
                    <!--</div>-->
                    <!--<h1 style="text-align: left">{{art.name}}-->
                    <!--&lt;!&ndash;<span class="sex sex1">&ndash;&gt;-->
                        <!--&lt;!&ndash;<span ng-if="art.six == 1" class="male">男</span>&ndash;&gt;-->
                        <!--&lt;!&ndash;<span ng-if="art.six == 2" class="male">女</span>&ndash;&gt;-->
                    <!--&lt;!&ndash;</span>&ndash;&gt;-->
                    <!--</h1>-->

                    <!--<div class="level">-->
                        <!--<div class="o_count">-->
					<!--<span>-->
					    <!--<i class="o_count_i"></i>-->
					    <!--{{art.order_num}}单-->
					<!--</span>-->
                        <!--</div>-->
                        <!--<div class="engineer-position">-->
                            <!--<span>位置：回龙观</span>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="clear"></div>-->
                    <!--&lt;!&ndash;<div class="elevel heighL">高级美容师</div>&ndash;&gt;-->
                    <!--<div class="desc">{{art.comment | limitTo:30}}...</div>-->
                <!--</div>-->
            <!--</li>-->
        <!--</ul>-->
    </div>
</div>

